<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.min.css">
<style type="text/css">
	img {
		max-width: 450px;
	}
</style>
</head>
<body>
	<form action="/admin/articles" method="post">
		文章审核状态：
		<input type="radio" name="status" value="0" ${status==0?"checked":"" }>待审
		<input type="radio" name="status" value="1" ${status==1?"checked":"" }>已审
		<input type="radio" name="status" value="-1" ${status==-1?"checked":"" }>驳回
		<input type="radio" name="status" value="2" ${status==2||status==null?"checked":"" }>全部
		<input type="button" onclick="query()" value="查询">
	</form>
	
	<table class="table">
		<tr>
			<td>序号</td>
			<td>文章标题</td>
			<td>作者</td>
			<td>发布时间</td>
			<td>所属栏目</td>
			<td>所属分类</td>
			<td>热门</td>
			<td>状态</td>
			<td>操作</td>
		</tr>
		
		<c:forEach items="${info.list }" var="article" varStatus="i">
			<tr>
				<td>${i.count }</td>
				<td>${article.title }</td>
				<td>${article.userName }</td>
				<td><fmt:formatDate value="${article.created }" pattern="yyyy-MM-dd"/> </td>
				<td>${article.channelName }</td>
				<td>${article.categoryName }</td>
				<c:if test="${article.hot==0}">
					<td><input type="button" value="否"  class="btn btn-success" onclick="updateHot('${article.id}',this)"></td>
				</c:if>
				<c:if test="${article.hot==1}">
					<td><input type="button" value="是"  class="btn btn-danger" onclick="updateHot('${article.id}',this)"></td>
				</c:if>
				
				<td>${article.status==0?"未审核":(article.status > 0?"已审核":"已驳回") }</td>
				<td>
					<input type="button" value="详情"  onclick="detail(${article.id})"
					class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >
				</td>
				
			</tr>
		</c:forEach>
		<tr>
			<td colspan="10"><jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include></td>
		</tr>
	</table>
	
	<!-- Modal -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel"><span id="title"></span></h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body" id="content">
	       
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-success" onclick="updateStatus(1)">通过</button>
	        <button type="button" class="btn btn-danger" onclick="updateStatus(-1)">驳回</button>
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
</body>
<script type="text/javascript">
	function goPage(pageNum){
		//获取选中的状态单选框的值
		var status = $("[name=status]:checked").val();
		
		//在分页参数上，拼接上选中的状态码
		/* location="/admin/articles?pageNum="+pageNum + "&status="+status; */
		
		$("#center").load("/admin/articles?pageNum="+pageNum + "&status="+status);
		
	}
	
	//更新是否热门的状态
	function updateHot(id,obj){
		//先获取要更新成的status值	
		var hot = obj.value=="是"?0:1;
		
		//使用ajax修改数据
		$.post(
			"/admin/updateArticle",
			{id:id,hot:hot},
			function(result){
				if(result){
					//修改成功以后，修改按钮的数据
					obj.value= (hot==0?"否":"是");//修改展示的数据
					
					if(hot==0){
						//如果不是热门
						$(obj).attr("class","btn btn-success")
					}else{
						//如果是热门
						$(obj).attr("class","btn btn-danger")
					}
				}
			}
		)
	}
	
	//设置一个文章id的全局变量
	var articleId;
	
	//查看文章详情的方法
	function detail(id){
		//将文章id赋值给全局变量
		articleId=id;
		//调用ajax从后台获取数据
		$.post(
			"/my/getArticleById",
			{id:id},
			function(article){
				$("#title").html(article.title);
				$("#content").html(article.content);
			}
		)
	}
	
	//修改文章的状态
	function updateStatus(status){
		//使用ajax
		$.post(
			"/admin/updateArticle",
			{id:articleId,status:status},
			function(result){
				if(result){
					//重新刷新页面
					/* location="/admin/articles?pageNum=${info.pageNum}"; */
					/* $("#center").load("/admin/articles?pageNum=${info.pageNum}"); */
					
					location="/admin";
				}
			}		
		)
	}
	
	//查询数据
	function query(){
		//获取form表单的数据
		var data = $("form").serialize();
		
		//提交
		$("#center").load("/admin/articles?" + data);
	}

</script>
</html>